<template>
    <div class="groupcar">
      <mt-header fixed class="head" title="购物车">
        <router-link to="" slot="left">
          <mt-button icon="" @click="gobefore" class="iconfont">&#xe615;</mt-button>
        </router-link>
        <mt-button class="iconfont buy" icon="" slot="right">&#xe6cd;</mt-button>
      </mt-header>
      <div class="list pr">
        <p><span @click="show" class="iconfont pr circle">&#xe623; <i v-show="isshow" class="pa"></i></span><span class="font iconfont"> 秀观唐服饰旗舰店&#xe638;</span><span class="time"> 2018-9-5 8:22</span></p>
        <ul class="clearfix lists">
          <li class="item">
            <span @click="show1" class="iconfont pr circles">&#xe623; <i v-show="isshow1" class="pa"></i></span>
            <img src="../../assets/img/transport1.jpg" /></li>
          <li class="item">
            <ul class="items">
              <li class="items-item1">秀观唐复古真丝旗袍</li>
              <li class="items-item2">颜色分类：黑底印花</li>
              <li class="items-item3">尺码：M</li>
              <li class="items-item4"><span>￥295.0 </span><span class="small"> ￥395.0</span></li>
              <li class="items-item5"><span class="iconfont">&#xe62c;</span><span class="num">1</span><span class="iconfont">&#xe6d4;</span></li>
            </ul>
          </li>
        </ul>
        <span class="del pa">删除</span>
      </div>
      <div class="list pr">
        <p><span @click="show" class="iconfont pr circle">&#xe623; <i v-show="isshow" class="pa"></i></span><span class="font iconfont"> 秀观唐服饰旗舰店&#xe638;</span><span class="time"> 2018-9-5 8:22</span></p>
        <ul class="clearfix lists">
          <li class="item">
            <span @click="show1" class="iconfont pr circles">&#xe623; <i v-show="isshow1" class="pa"></i></span>
            <img src="../../assets/img/transport1.jpg" /></li>
          <li class="item">
            <ul class="items">
              <li class="items-item1">秀观唐复古真丝旗袍</li>
              <li class="items-item2">颜色分类：黑底印花</li>
              <li class="items-item3">尺码：M</li>
              <li class="items-item4"><span>￥295.0 </span><span class="small"> ￥395.0</span></li>
              <li class="items-item5"><span class="iconfont">&#xe62c;</span><span class="num">1</span><span class="iconfont">&#xe6d4;</span></li>
            </ul>
          </li>
        </ul>
        <span class="del pa">删除</span>
      </div>
      <div class="list pr">
        <p><span @click="show" class="iconfont pr circle">&#xe623; <i v-show="isshow" class="pa"></i></span><span class="font iconfont"> 秀观唐服饰旗舰店&#xe638;</span><span class="time"> 2018-9-5 8:22</span></p>
        <ul class="clearfix lists">
          <li class="item">
            <span @click="show1" class="iconfont pr circles">&#xe623; <i v-show="isshow1" class="pa"></i></span>
            <img src="../../assets/img/transport1.jpg" /></li>
          <li class="item">
            <ul class="items">
              <li class="items-item1">秀观唐复古真丝旗袍</li>
              <li class="items-item2">颜色分类：黑底印花</li>
              <li class="items-item3">尺码：M</li>
              <li class="items-item4"><span>￥295.0 </span><span class="small"> ￥395.0</span></li>
              <li class="items-item5"><span class="iconfont">&#xe62c;</span><span class="num">1</span><span class="iconfont">&#xe6d4;</span></li>
            </ul>
          </li>
        </ul>
        <span class="del pa">删除</span>
      </div>
      <div class="list pr">
        <p><span @click="show" class="iconfont pr circle">&#xe623; <i v-show="isshow" class="pa"></i></span><span class="font iconfont"> 秀观唐服饰旗舰店&#xe638;</span><span class="time"> 2018-9-5 8:22</span></p>
        <ul class="clearfix lists">
          <li class="item">
            <span @click="show1" class="iconfont pr circles">&#xe623; <i v-show="isshow1" class="pa"></i></span>
            <img src="../../assets/img/transport1.jpg" /></li>
          <li class="item">
            <ul class="items">
              <li class="items-item1">秀观唐复古真丝旗袍</li>
              <li class="items-item2">颜色分类：黑底印花</li>
              <li class="items-item3">尺码：M</li>
              <li class="items-item4"><span>￥295.0 </span><span class="small"> ￥395.0</span></li>
              <li class="items-item5"><span class="iconfont">&#xe62c;</span><span class="num">1</span><span class="iconfont">&#xe6d4;</span></li>
            </ul>
          </li>
        </ul>
        <span class="del pa">删除</span>
      </div>
      <div class="list pr">
        <p><span @click="show" class="iconfont pr circle">&#xe623; <i v-show="isshow" class="pa"></i></span><span class="font iconfont"> 秀观唐服饰旗舰店&#xe638;</span><span class="time"> 2018-9-5 8:22</span></p>
        <ul class="clearfix lists">
          <li class="item">
            <span @click="show1" class="iconfont pr circles">&#xe623; <i v-show="isshow1" class="pa"></i></span>
            <img src="../../assets/img/transport1.jpg" /></li>
          <li class="item">
            <ul class="items">
              <li class="items-item1">秀观唐复古真丝旗袍</li>
              <li class="items-item2">颜色分类：黑底印花</li>
              <li class="items-item3">尺码：M</li>
              <li class="items-item4"><span>￥295.0 </span><span class="small"> ￥395.0</span></li>
              <li class="items-item5"><span class="iconfont">&#xe62c;</span><span class="num">1</span><span class="iconfont">&#xe6d4;</span></li>
            </ul>
          </li>
        </ul>
        <span class="del pa">删除</span>
      </div>
      <div class="last pf">
        <span @click="show" class="iconfont pr circle">&#xe623; <i v-show="isshow" class="pa"></i> <span class="small">全选</span></span>
        <span>合计： <span class="red">0</span> 元</span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span>包含运费： <span class="red">0</span> 元</span>
        <span class="last-last pa">结算</span>
      </div>
    </div>
</template>

<script>
    export default {
      data(){
        return{
          isshow:false,
          isshow1:false
        }
      },
      methods:{
        show(){
          if(!this.isshow){
            this.isshow = true;
            this.isshow1 = true;
          }else{
            this.isshow = false;
            this.isshow1 = false;
          }
        },
        show1(){
          this.isshow1 = !this.isshow1
        },
        gobefore(){
          this.$router.go(-1)
        }
      },
        name: "Groupcar"
    }
</script>

<style scoped lang="stylus">
  .groupcar
    font-size: .6rem
    padding-top: 2rem
    padding-bottom: 5rem
    min-height 650px
    .last
      width: 100%
      background: #995d45
      bottom: 2.7rem
      left: 0
      color: #ffffff
      font-size: .6em
      padding: .5rem 0
      .last-last
        background: #e7160f
        padding: .6rem 1.2rem
        right: 0
        bottom: 0
      .red
        color: #e7160f
      .circle
        margin: .2rem
        margin-left: 1rem
        .small
          font-size: .6rem
        i
          padding: .25rem
          -webkit-border-radius: 50%
          -moz-border-radius: 50%
          border-radius: 50%
          top: 20%
          left: 8%
          background: #000000
    .list
      margin: .4rem
      padding-bottom: .6rem
      -webkit-border-radius: .25rem
      -moz-border-radius: .25rem
      border-radius: .25rem
      background: #dcc3a8
      .del
        right: 2%
        bottom: 10%
        padding: .2rem .6rem
        background: #f1dabd
      .lists
        display flex
        padding: .1rem 0
        .item
          margin-left: .3rem
          display: flex
          align-items center
          .items
            flex 1
            .items-item1
              margin-top: .4rem
            .items-item2
              color: #4c4c4c
              margin-top: .4rem
            .items-item3
              color: #4c4c4c
              margin-top: .2rem
            .items-item4
              font-size: 1rem
              margin-top: .8rem
              .small
                font-size: .6rem
                text-decoration line-through
            .items-item5
              margin-top: .6rem
              color: #ffffff
              .num
                padding: 0 .2rem
                margin: 0 .4rem
                border: 1px solid rgba(255,255,255,0.3)
                color: #4c4c4c
          img
            vertical-align: middle
            width: 3.5rem
            height: 5.5rem
          .circles
            color: #ffffff
            margin-right: .4rem
            i
              padding: .25rem
              -webkit-border-radius: 50%
              -moz-border-radius: 50%
              border-radius: 50%
              top: 20%
              left: 16%
              background: #000000
      p
        display flex
        -webkit-border-radius: .25rem
        -moz-border-radius: .25rem
        border-radius: .25rem
        background: #f6e0c2
        padding: .1rem 0
        .circle
          color: #ffffff
          i
            padding: .25rem
            -webkit-border-radius: 50%
            -moz-border-radius: 50%
            border-radius: 50%
            top: 20%
            left: 20%
            background: #000000
        .circle, .time
          margin: 0 .2rem
        .font
          flex 1
    .head
      z-index 2
      display flex
      background: #581513
      color: #f6e0c2
</style>
